package com.tinusgraglin.enclusiv.ui.components

import androidx.compose.animation.core.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.Canvas
import androidx.compose.runtime.*
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color

@Composable
fun AnimatedLoadingDots(modifier: Modifier, color: Color = Color.White) {
    val infTrans = rememberInfiniteTransition()
    val keyFrameSpec = keyframes<Float> {
        durationMillis = 1500
        0f at 0 with LinearEasing
        1f at 500 with LinearEasing
        0f at 750
    }

    val opacity1 by infTrans.animateFloat(
        initialValue = 0.0F,
        targetValue = 0.0F,
        animationSpec = infiniteRepeatable(
            animation = keyFrameSpec,
            repeatMode = RepeatMode.Restart
        )
    )
    val opacity2 by infTrans.animateFloat(
        initialValue = 0.0F,
        targetValue = 0.0F,
        animationSpec = infiniteRepeatable(
            initialStartOffset = StartOffset(250),
            animation = keyFrameSpec,
            repeatMode = RepeatMode.Restart
        )
    )
    val opacity3 by infTrans.animateFloat(
        initialValue = 0.0F,
        targetValue = 0.0F,
        animationSpec = infiniteRepeatable(
            initialStartOffset = StartOffset(500),
            animation = keyFrameSpec,
            repeatMode = RepeatMode.Restart
        )
    )

    Canvas(modifier = modifier) {
        drawCircle(
            color = color,
            radius = 10.0F,
            center = Offset(this.center.x - 35F, this.center.y),
            alpha = opacity1
        )
        drawCircle(
            color = color,
            radius = 10.0F,
            center = this.center,
            alpha = opacity2
        )
        drawCircle(
            color = color,
            radius = 10.0F,
            center = Offset(this.center.x + 35F, this.center.y),
            alpha = opacity3
        )
    }
}